// ------------------获取分类--------------------
// render -- 渲染   category -- 类别
function renderCategory() {
  //发送ajax请求获取数据，渲染页面
  axios.get('/my/category/list').then(res => {
    // console.log(res);
    let { status, data } = res.data
    if (status === 0) {
      let arr = [];
      data.forEach(item => {
        arr.push(`
          <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id=${item.id} data-name=${item.name} data-alias=${item.alias} type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id=${item.id} type="button" class="del layui-btn  layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>`)
      })
      $('tbody').html(arr.join(''))
    }
  })
}
renderCategory();
//---------------------------添加类别-------------------------------
//1，点击添加类别，出现弹层
let addIndex;
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加分类',
    content: $('#tpl-add').html(),//script标签type="text/html"
    area: ['500px', '250px'],

  });
})
//提交表单数据，发送ajax'请求，成功后重新渲染页面
// 表单提交数据，先获取form数据，事件委托
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();//name属性
  axios.post('/my/category/add', data).then(res => {
    // console.log(res.data);//{status: 0, message: "添加分类成功"}
    let { status, message } = res.data
    if (status === 0) {
      layer.msg(message)
      //关闭弹层
      layer.close(addIndex)
      renderCategory();
    }
  })
})
//--------------------编辑类别----------------

//1，点击编辑类别，出现弹层
let editIndex;
$('body').on('click', 'button:contains("编辑")', function () {
  //获取表单数据===数据回填
  let shuju = $(this).data();
  // console.log(shuju);//{alias: "hhh", name: "uuu", id: 4539}
  editIndex = layer.open({
    type: 1,
    title: '编辑类别',
    content: $('#tpl-edit').html(),//script标签type="text/html"
    area: ['500px', '250px'],
    success: function () {
      //数据回填
      $('#edit-form input[name=name]').val(shuju.name);
      $('#edit-form input[name=alias]').val(shuju.alias);
      $('#edit-form input[name=id]').val(shuju.id);
    }
  });
})
//2,完成编辑，确认修改，提交表单数据
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  //搜集数据
  let data = $(this).serialize();
  //提交数据
  axios.post('/my/category/update', data).then(res => {
    // console.log(res.data);//data: {status: 0, message: "修改分类成功"}
    let { status, message } = res.data
    if (status === 0) {
      layer.msg(message)
      //关闭弹层
      layer.close(editIndex)
      renderCategory();
    }
  })
})
//--------------------删除分类--------------------
$('tbody').on('click','button:contains("删除")',function(){
  //获取id
  let id =$(this).data('id');
  //弹框询问
  layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    //do something
    console.log(id);//2352
    axios.get(`/my/category/delete?id=${id}`).then(res=>{
      let {status,message} = res.data
      if(status===0){
        layer.msg(message)
        renderCategory();
      }
    })
    layer.close(index);
  });
})

